<template>
	<view>
		<view class="container">
			<loading ref="loading" :custom="false" :shadeClick="false" :type="2" @callback="callback()">
			</loading>
			<TabBar v-if="onshow" :tabIndex="tabindex"></TabBar>
			<!-- 头部-->
			<view class="carousel-section">
				<!-- 背景色区域 -->
				<view class="titleNview-background"
					style="background: url('../../static/wximg/bjTop2.png'); background-size: 100%;">
					<!-- v-if="!noticeShow" anchor wos 会影响整体布局 -->
					<view @click="noticeURL" class="title-message">
						<view class="noticeBt"></view>
						<image src="../../static/wximg/message.png"></image>
					</view>
					<view class="logOut" @tap="ifLogOut">
						<text>退出登录</text>
					</view>
					<view class="title-logo">
						<image src="../../static//wximg/logo_w.png"></image>
					</view>
				</view>

				<!-- 配送员-引导按钮 -->
				<view v-if="deliveryboy" class="content" :style="{height: heightContent +'px'}">
					<navigator class="btn01" type="default" url='/pages/distribution/distribution' open-type='reLaunch'>
						<image src="../../static/wximg/In1.png"></image>
					</navigator>
					<!-- <navigator class="btn02" type="default"  url='/pages/VerificationSigned/VerificationSigned'  open-type='navigate'><image :src="url+'/wximg/In3.png'"></image></navigator> -->
					<navigator class="btn03" type="default" url='/pages/delivered/delivered' open-type='navigate'>
						<image src="../../static/wximg/In4.png"></image>
					</navigator>
					<!-- <navigator class="btn03" type="default" @click="clearStroage()">
						<image src="../../static/clear.png"></image>
					</navigator> -->
					<!-- <view style="padding-top: 200rpx;">
						<view v-if="ifData" >
							<switch color="#007457" checked @change="switch1Change" />使用数据网络
						</view>
						<view v-else>
							<switch color="#007457"  @change="switch1Change" />使用物联网数据
						</view>
					</view> -->
				</view>

				<!-- 商户-引导按钮 -->
				<view v-if="userstaff" class="content" :style="{height: heightContent +'px'}">
					<!-- <navigator class="btn01" type="default"   url='/pages/empower/empower'  open-type='switchTab'><image :src="url+'/wximg/sh01.png'"></image></navigator> -->
					<navigator class="btn02" type="default" url='/pages/VerificationSigned/merchantsVs'
						open-type='switchTab'>
						<image :src="url()+'/wximg/sh02.png'"></image>
					</navigator>
					<navigator class="btn03" type="default" url='/pages/merchantsSIn/SignedIn' open-type='switchTab'>
						<image :src="url()+'/wximg/sh03.png'"></image>
					</navigator>
					<!-- <navigator class="btn03" type="default"   @click="logOut"    open-type='navigate'  ><image :src="url+'/wximg/leave.png'"></image></navigator> -->
					<!-- 		<navigator class="btn03" type="default" url='/pages/management/managementHome'  open-type='navigate'><image src="@/static/font/temp/fzr.png"></image></navigator> -->
				</view>
				<!-- 领导-引导按钮 -->
				<view v-if="reportForm" class="content" :style="{height: heightContent +'px'}">
					<navigator class="btn03" type="default" url='/pages/bar/bar' open-type='navigate'>
						<image :src="url()+'/wximg/form.png'"></image>
					</navigator>
					<!-- <navigator class="btn03" type="default"   @click="logOut"  ><image :src="url+'/wximg/leave.png'"></image></navigator> -->
				</view>
				<!-- 负责人引导按钮 -->
				<view v-if="stafffrom" class="content" :style="{height: heightContent +'px'}">
					<navigator class="btn03" type="default" url='/pages/management/managementHome' open-type='navigate'>
						<image :src="url()+'/wximg/fzr.png'"></image>
					</navigator>
					<!-- <navigator class="btn03" type="default"   @click="logOut"  ><image :src="url+'/wximg/leave.png'"></image></navigator> -->
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import {
		ReplaceTabBar
	} from '@/api/ReplaceTabBar.js'
	import service from '../../service.js';
	import loading from '@/components/xuan-loading/xuan-loading.vue'
	import TabBar from '@/components/tabBar.vue'
	import url from '@/api/url.js';
	import Encr from '@/common/aes.js';
	export default {
		components: {
			loading,
			TabBar
		},
		data() {
			return {
				url: url,
				heightContent: '',
				onshow: false,
				noticeShow: true,
				tabindex: 0,
				deliveryboy: false, //送货员 引导按钮显示隐藏
				userstaff: false, // 员工按钮显示隐藏
				reportForm: false, //领导按钮显示隐藏
				stafffrom: false, //负责人按钮显示隐藏
				ifData:true
			};
		},
		onReady() {
			let _that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
					// res - 各种参数
					let info = uni.createSelectorQuery().select(".content"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						let view = res.windowHeight - data.top - 30
						_that.heightContent = view
					}).exec()
				}
			});
		},
		onLoad() {
			this.ifData = uni.getStorageSync('netType')
			/* uni.hideTabBar();//隐藏底部导航 */
			let user = service.getUsers().user;
			/* service.getposition("1","2"); */
			let that = this;
			let _this = this;
			if (user != null && user != undefined) {
				if (this.$store.state.is_open_socket == false) {
					// this.$store.commit("connectSocketInit", user.id)
				} else {
					console.log("链接存在 不需要初始化 ")
				}
				if (user.userRole == undefined) { //判断是否是  送货 或者领导
					uni.showTabBar() //显示tabBar
					this.userstaff = true;
				} else {
					if (user.userRole.length > 0) {
						user.userRole.forEach(function(item) {
							if (item.role_id == '19') { //是领导
								uni.hideTabBar(); //隐藏底部导航
								_this.reportForm = true;
								uni.navigateTo({
									url: '/pages/bar/bar',
								})
							} else if (item.role_id == '20') { //配送员
								_this.deliveryboy = true;
								_this.noticeShow = false;
								uni.hideTabBar(); //隐藏底部导航 渲染组件自定义tab
								_this.onshow = true;
							} else if (item.role_id == '23') { //配送负责人
								uni.hideTabBar(); //隐藏底部导航 渲染组件自定义tab
								_this.stafffrom = true;
							} else {
								uni.hideTabBar(); //隐藏底部导航
								_this.ReturnToLogin("您没有本公司权限，请退出!");
							}
						})
					} else {
						uni.hideTabBar(); //隐藏底部导航
						_this.ReturnToLogin("您没有本公司权限，请退出!");
					}
				}
			} else {
				uni.hideTabBar(); //隐藏底部导航
				_this.ReturnToLogin("您未开通本应用使用权限，请退出");
			}
			this.getTaskData().then(resTask => {
				uni.setStorageSync('tobacco_carID',resTask.map.deliveryman[0].carId)
				uni.getLocation({
					type: 'gcj02',
					"geocode": true,
					success: function(res) {
						uni.request({
							url: 'http://ccwx.jltobacco.com.cn:4000/yancaoMap/app/saveLatAndLng',
							method: 'POST',
							data: {
								carId: resTask.map.deliveryman[0].carId,
								lngAndLat: res.longitude + "|" + res.latitude
							},
							success: (res) => {
								// console.warn("坐标回传成功", res)
							},
							fail: err => {
								console.error(err)
							}
						})
					},
					fail: (err) => {
						console.error(err)
					}
				});
			})
		},
		methods: {
			// 获取任务信息
			getTaskData() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: url() + '/app/DeliveryTask/deliveryList',
						method: 'POST',
						data: Encr.encryptData(JSON.stringify({
							userid: JSON.parse(uni.getStorageSync("USERS_KEY")).user.id
						})),
						success: function(res) {
							if (res.statusCode == '200') {
								let result = JSON.parse(Encr.decrypt(res.data))
								resolve(result)
							} else {
								reject(res)
							}
						},
						fail: (err) => {
							reject(err)
						}
					});
				})
			},
			switch1Change(e){
				this.ifData = e.target.value
				// console.log(e.target.value)
				uni.setStorageSync('netType', e.target.value) 
			},
			clearStroage() {
				uni.showModal({
					title: '提示',
					content: '是否要清除缓存',
					success: (res) => {
						if (res.confirm) {
							console.log("ok")
							uni.removeStorageSync("dictionaryList")
							uni.removeStorageSync("catch")
							uni.removeStorageSync("catchStatus")
						}
					}
				})

			},
			ReturnToLogin(Str) {
				let _that = this;
				uni.showModal({
					title: '警告',
					content: Str,
					showCancel: false,
					success: function(succ) {
						if (succ.confirm) {
							/* _that.logOut(); */
							_that.logOut();
						} else if (succ.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			noticeURL() {
				uni.navigateTo({ //关闭跳转 防止返回 跳转index
					url: '/pages/notice/notice',
				})
			},
			jump1(url) {
				uni.switchTab({
					url: url
				})
			},
			ifLogOut() {
				uni.showModal({
					title: '提示',
					content: '是否要退出登录',
					success: (res) => {
						if (res.confirm) {
							this.logOut()
						}
					}
				})
			},
			logOut() {
				service.logOut();
				uni.redirectTo({ //关闭跳转 防止返回 跳转index
					url: '/pages/login/login',
				})
			},
			close() {
				this.$refs.loading.close();
			},
			open() {
				this.$refs.loading.open();
			},
			callback() {
				console.log("加载关闭后回掉");
			},
		}
	}
</script>
<style scoped>
	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		/* background: url(../../static/font/temp/bjTop.png); */
		background-size: 100% 100%;
	}

	.title-message {
		width: 60upx;
		height: 60upx;
		padding-top: 112upx;
		margin-left: 50upx;
		display: block;
		position: relative;
	}

	.noticeBt {
		background-color: #ec4d4d;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		position: absolute;
		right: 5px;
		/* top: 0; */
		float: right;
	}


	.content {
		position: relative;
		width: 91%;
		margin: 0 auto;
		background-color: white;
		margin-top: -120upx;
		z-index: 2;
		border-radius: 25px;
		display: flex;
		flex: 1;
		/*设置容器内部容器的排列方向*/
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.btn01,
	.btn02,
	.btn03 {
		width: 90.87%;
		height: 152.8upx;
		margin: 0 auto;
		margin-bottom: 45.5upx;
		background-size: 100% 100%;
		border: none;
		background: transparent;
	}


	.title-message image,
	.btn01 image,
	.btn02 image,
	.btn03 image {
		width: 100%;
		height: 100%;
	}

	.title-logo {
		/* padding-top: 174upx; */
		padding: 34upx 0;
		width: 750rpx;
		text-align: center;
	}

	.title-logo image {
		width: 248upx;
		height: 76upx;
	}

	.logOut {
		margin: 5upx 0 0 20upx;
		height: 30upx;
		line-height: 30upx;
		width: 150upx;
		text-align: center;
		padding: 10upx 0;
		background-color: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
		border-radius: 20upx;
		position: fixed;
		top: 112rpx;
		right: 20rpx;
	}
</style>
